﻿@{
    ViewBag.Title = "jqGrid in ASP.NET MVC - CRUD [Inline Editing]";

    var grid = new Lib.Web.Mvc.JQuery.JqGrid.JqGridHelper<jqGrid.Models.ProductInlineEditableViewModel>("products",
        dataType: Lib.Web.Mvc.JQuery.JqGrid.JqGridDataTypes.Json,
        editingUrl: Url.Action("UpdateProduct"),
        methodType: Lib.Web.Mvc.JQuery.JqGrid.JqGridMethodTypes.Post,
        pager: true,
        rowsNumber: 10,
        sortingName: "Id",
        sortingOrder: Lib.Web.Mvc.JQuery.JqGrid.JqGridSortingOrders.Asc,
        url: Url.Action("Products"),
        viewRecords: true
    ).AddActionsColumn("actions",
        inlineEditingOptions: new Lib.Web.Mvc.JQuery.JqGrid.JqGridInlineNavigatorActionOptions() { Keys = true },
        deleteOptions: new Lib.Web.Mvc.JQuery.JqGrid.JqGridNavigatorDeleteActionOptions() { Url = Url.Action("DeleteProduct") })
    .Navigator(new Lib.Web.Mvc.JQuery.JqGrid.JqGridNavigatorOptions() { Add = false, Edit = false, Delete = false, Search = false })
    .InlineNavigator(new Lib.Web.Mvc.JQuery.JqGrid.JqGridInlineNavigatorOptions() { Edit = false, AddActionOptions = new Lib.Web.Mvc.JQuery.JqGrid.JqGridInlineNavigatorAddActionOptions() { RowId = "_empty", Options = new Lib.Web.Mvc.JQuery.JqGrid.JqGridInlineNavigatorActionOptions() { Url = Url.Action("InsertProduct") } } });
}

@grid.GetHtml()
<div id="supplier"></div>

@section JavaScript {
    <script id="supplier-tmpl" type="text/x-jquery-tmpl">
        ${CompanyName}<br /><br />
        ${Address}<br />
        ${PostalCode}, ${City}<br />
        ${Country}<br /><br />
        ${Phone}<br />
        ${HomePage}
    </script>
    <script type="text/javascript">
        $.lastSelectedRow = null;

        $(document).ready(function () {
            @grid.GetJavaScript()
            $('#supplier').dialog({ autoOpen: false, bgiframe: true, resizable: false, title: 'Supplier' });
            $(document).on('click', 'a[data-supplier-id]', function (e) {
                if (e.preventDefault)
                    e.preventDefault();
                else
                    e.returnValue = false;

                var dialogPosition = $(this).offset();
                $.post('@Url.Action("Supplier")', { id: $(this).attr('data-supplier-id') }, function(data) {
                    $('#supplier').empty();
                    $('#supplier-tmpl').tmpl(data).appendTo('#supplier');
                    $('#supplier').dialog('option', 'position', [dialogPosition.left, dialogPosition.top]);
                    $('#supplier').dialog('open');
                });
            });
        });

        $.unitsInStockFormatter = function(cellvalue, options, rowObject) {
            if (typeof(cellvalue) != 'undefined') {
                var cellValueInt = parseInt(cellvalue);
                if (cellValueInt > 10) {
                    return "<img src='@Url.Content("~/Content/images/ui-flag_green.png")' alt='" + cellvalue + "' title='" + cellvalue + "' />";
                } else if (cellValueInt > 0) {
                    return "<img src='@Url.Content("~/Content/images/ui-flag_blue.png")' alt='" + cellvalue + "' title='" + cellvalue + "' />";
                } else {
                    return "<img src='@Url.Content("~/Content/images/ui-flag_red.png")' alt='" + cellvalue + "' title='" + cellvalue + "' />";
                }
            } else {
                return '';
            }
        };

        $.unitsInStockUnFormatter = function(cellvalue, options, cellobject) {
            if (typeof(cellvalue) != 'undefined') {
                return $('img', cellobject).attr('title');
            }
        };

        $.supplierFormatter = function(cellvalue, options, rowObject) {
            if (typeof(cellvalue) != 'undefined') {
                if (cellvalue.indexOf('[') == 0) {
                    return cellvalue.substr(cellvalue.indexOf(']') + 2);
                } else {
                    return cellvalue;
                }
            } else {
                return '';
            }
        };
    </script>
}